<template>
  <section class="component add-member">
    <el-form :model="model" :rules="rules" ref="add-member">
      <el-row align="24">
        <el-col :span="12">
          <el-form-item label="会员名称" prop="name">
            <el-input v-model="model.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="model.mobile"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="24">
        <el-col :span="12">
          <el-form-item label="支付渠道" prop="payChannel">
            <el-select size="small" v-model="model.payChannel">
              <el-option v-for="{code,name} in this.$dict.getDict(DictType.PayChannel)" :key="code" :label="name" :value="code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付方式" prop="payType">
            <el-select size="small" v-model="model.payType">
              <el-option v-for="{code,name} in this.$dict.getDict(DictType.PayType)" :key="code" :label="name" :value="code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="24">
        <el-col :span="12">
          <el-form-item label="支付金额" prop="price">
            <el-input type="number" v-model.trim="model.price"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总使用次数" prop="count">
            <el-input type="number" v-model="model.count"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="24">
        <el-col :span="12">
          <el-form-item label="产品" prop="productName">
            <el-input v-model="model.productName" @focus="dialog.isOpenProductList = true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品价格" prop="productPrice">
            <el-input v-model="model.productPrice" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="24">
        <el-col :span="24">
          <el-form-item label="产品内容" prop="productContent">
            <el-input type="textarea" readonly v-model.trim="model.productContent" :autosize="{ minRows:2, maxRows:4}" :maxlength="50"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row  align="24">
        <el-col :span="24">
          <el-form-item label="产品说明" prop="remark">
            <el-input type="textarea" readonly v-model.trim="model.remark" :autosize="{ minRows:2, maxRows:4}" :maxlength="50"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label-width="0px">
        <el-row type="flex" justify="center">
          <el-button @click="close()">取消</el-button>
          <el-button @click="confirm()">确定</el-button>
        </el-row>
      </el-form-item>
    </el-form>

    <el-dialog title="产品列表" append-to-body :close-on-click-modal="false" :show-close="false" :visible.sync="dialog.isOpenProductList" @open="$nextTick(() => $refs['product-list'].refresh())" width="1300px" custom-class="dialog">
      <product-list ref="product-list" @close="dialog.isOpenProductList = false" @selectionRowChange="(val) => onChange(val)"></product-list>
    </el-dialog>

  </section>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Dependencies } from '~/core/decorator'
import { Prop, Emit } from 'vue-property-decorator'
import ProductList from "./product-list.vue";
import { MemberService } from '~/service/service-member/member.service';
import { DictType } from '~/config/enum/dict/dict-type.enum';

@Component({
  components: {
    ProductList
  }
})
export default class AddProduct extends Vue {
  @Dependencies(MemberService)
  private memberService: MemberService

  private DictType: any = DictType

  private model: any = {
    name: '',
    mobile: '',
    productName: '',
    productContent: '',
    productPrice: '',
    remark: '',
    price: '',
    payChannel: '',
    payType: '',
    count: ''
  }

  private rules: any = {
    name: [{required: true, message: '请输入会员名称', trigger: 'blur'}],
    mobile: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
    payChannel: [{required: true, message: '请选择支付渠道', trigger: 'blur'}],
    payType: [{required: true, message: '请选择支付方式', trigger: 'blur'}],
    price: [{required: true, message: '请输入支付金额', trigger: 'blur'}],
    count: [{required: true, message: '请输入会员总使用次数', trigger: 'blur'}],
    productName: [{required: true, message: '请选择产品', trigger: 'change'}],
  }

  private productId: string | null = null

  private dialog: any = {
    isOpenProductList: false
  }

  @Emit('close')
  public close() {}
  @Emit('refreshData')
  public refreshData() {}

  /**
   * 确定
   */
  private confirm() {
    let addForm: any = this.$refs['add-member']
    addForm.validate((valid)=> {
      if (valid) {
        const param = {
          productId: this.productId,
          name: this.model.name,
          mobile: this.model.mobile,
          price: this.model.price,
          payChannel: this.model.payChannel,
          payType: this.model.payType,
          count: this.model.count
        }
        this.memberService.addMember(param).subscribe(
          () => {
            this.refreshData()
            this.close()
            this.$message.success('添加完成')
          },
          error => this.$message.error(error.msg)
        )
      }
    })
  }

  private refresh() {
    let addForm: any = this.$refs['add-member']
    addForm.resetFields()
  }

  private onChange(val) {
    this.productId = val.id
    this.model.productContent = val.productContent
    this.model.productName = val.productName
    this.model.productPrice = val.productPrice
    this.model.remark = val.remark
  }
}
</script>
<style lang="less" scoped>
.dialog {
  .el-dialog__body {
    padding: 0px 20px 30px 20px;
  }
}

</style>